<template>
    <div class="Sys-content-box">
        <!--添加一级区域-->
        <div class="sys-content-head clear">
            <button class="add-btn" @click="addAera1"><span class="iconfont">+</span>添加栏目</button>
          <!--  <div class="serach-input">
                <el-input
                        placeholder="请输入父栏目"
                        prefix-icon="el-icon-date"

                        v-model="serach1">
                </el-input>
                <el-input
                        placeholder="请输入子栏目"
                        prefix-icon="el-icon-search"
                        v-model="serach2">
                </el-input>
                <el-button icon="el-icon-search" circle @click="serchConfig()"></el-button>
            </div>-->

        </div>
        <el-table
                :data="showData"
                border
                style="width: 100%">
            <el-table-column
                    label="父栏目"
                    width="180">
                <template slot-scope="scope">
                    <span class="color-item">{{scope.row.info_section_name}}</span><span>({{scope.row.info_sectionList.length}})</span>

                </template>
            </el-table-column>
            <el-table-column
                    label="子栏目">
                <template slot-scope="scope">
                    <el-tag v-for="area in scope.row.info_sectionList"
                            :key="area.info_section_id" type="info">
                        {{area.info_section_name}}
                        <span v-if='deltagvisible' class="del-tag" @click="deltag(area)">x</span></el-tag>

                </template>
            </el-table-column>
            <el-table-column label="操作"  prop="locationList"  width="180">
                <template slot-scope="scope">
                    <el-button @click="editArea12(scope.row)" type="text" size="small">编辑</el-button>  <!--添加2级区域-->

                    <el-button type="text" size="small" @click="deletearea1(scope.row)" v-if="">删除</el-button>
                    <el-button v-if='!deltagvisible' type="text" size="small" @click="deletearea2()">删除块</el-button> <el-button v-if='deltagvisible' type="text" size="small" @click="quitdeletearea2()">退出删除模式</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--添加通用-->
        <SysCulAddDraw
                :childrenNum="locationNum"
                :visible="addDrawVisible"
                :initstate="addDrawVisible"
                :form="selectAreaData"
                :typetitle="configtypeMap[`${configtype}`]"
                :nowtype="configtype"
                :drawUrl="nowUrl"
                :addOrEdit="addOrEditType"
                @onclose="closeAddDraw(arguments)"
        >
        </SysCulAddDraw>

        <p class="total-size">总计<span>{{totalSize}}</span>条记录</p>
        <el-pagination

                :page-size="pageSize"
                @current-change="fenye"
                layout="prev, pager, next"
                :page-count="pageCount"
        >
        </el-pagination>
        <!--        删除组件/-->
        <SysConfigDel
                :form="delItem"
                :title="delDialogTitle"
                :visible="delFormVisile"
                :nowtype="configtype"
                :drawUrl="nowUrl"
                @onclose="closedeldia(arguments)"
        >
        </SysConfigDel>
    </div>
</template>
<script>
    /*添加弹框引入*/

    import SysCulAddDraw  from '../components/SysCulAddDraw'

    import SysConfigDel  from '../components/SysConfigDel'


    export default {
        name: "SysCulPage",
        components:{
            SysConfigDel,
            SysCulAddDraw,
        },
        props:['configtype'],
        data() {
            return {
                configtypeMap:{
                    Consulting:{
                        addTitle:'栏目',
                        table1colTitle:'父栏目',
                        table2colTitle:'子栏目'
                    },},
                totalSize:1,
                pageSize:10,
                //搜索
                serach1:'',
                serach2:'',
//标签内容map

                /*添加弹框的数据*/
                addDrawVisible: false,
                selectAreaData: {},


                /*区域表格数据接受后端返回的已分页*/
                showData:[],
                pageCount:1,
                //当前页
                currentPage:1,
//删除组件
                delDialogTitle: "",
                delDialogTitleMap: {

                    Consulting:{
                        area1DelTile:'公交线',
                        area2DelTile:'站点',
                    },
                },
                //修改子栏目
                addDialogTitle:'',
                //
                editTagvisible:false,
                //是否显示删除标签的图标
                deltagvisible:false,
                delFormVisile:false,
                delItem:{},
                //接口表
                nowUrl:{
                    geturl:'/info_section/queryInfoSection',
                    delurl:'/info_section/delInfoSection',
                    addurl:'/info_section/addInfoSection',
                    editurl:'/info_section/updateInfoSection',
                },
                //操作类型
                addOrEditType:0,
                locationNum:'',
            };
        },
        methods: {
            //删除父栏目
            deletearea1(item) {
                this.delDialogTitle ='父栏目'
                //删除区
                this.delFormVisile = true;
                this.delItem = { ...item };

            },
            closedeldia(e) {
                if (e[0]) {
                    //重新获取区块信息
                    //重新获取数据
                    this.getCulData()
                } else {
                    this.$message({
                        type: "info",
                        message: "取消操作",
                    });
                }
                this.delFormVisile = false;
            },
            //打开删除标签
            deletearea2(){

                this.editTagvisible=false
                this.deltagvisible=true
            },
            quitdeletearea2(){
                this.deltagvisible=false
            },
            //删除标签
            deltag(item){
                //请求
                this.delDialogTitle ='子栏目'
                this.delFormVisile = true;
                this.delItem = { ...item };
            },
            //分页
            fenye(val) {
                this.currentPage = val;
                //调用查询函数。
                this.getCulData()
            },

            //打开编辑模式。
           /* edittag(item){
                this.selectAreaData={...item}
                this.addDrawVisible=true
                this.addDialogTitle = '修改子栏目'
            },
            //
            quitedit(){
                this.editTagvisible=false
            },*/
            editArea12(item){
                //显示
                this.addDrawVisible=true

                this.selectAreaData={
                    info_section_name:item.info_section_name,

                    info_section_id:item.info_section_id,
                    info_sectionList:[],
                }
                // console.log(this.selectAreaData)
                this.addOrEditType=2
                this.locationNum=this.selectAreaData.info_sectionList.length

            },

            //添加区域配置弹框
            addAera1(){
                // console.log('addddddddddddddddddddddd')
                this.addOrEditType=1
                this.addDrawVisible=true
                this.selectAreaData={
                    info_section_name:'',
                    info_sectionList:[],
                }
                this.locationNum=this.selectAreaData.info_sectionList.length
            },
            //添加块
            addAera2(item){


            },
            closeAddDraw(e){
                this.addDrawVisible=false
                this.addOrEditType=0
                if (!e[0]){
                    this.$message({
                        type:'info',
                        message:'取消操作'
                    })

                }else{
                    //重新获取数据
                    this.getCulData()
                }

            },
            getCulData(){
                /* this.showData=areaData;*/
                // console.log('`````url`````')

                this.axios({
                    url:this.nowUrl.geturl,
                    method:'get',
                    params:{limit:this.pageSize,page:this.currentPage}
                }).then(data=>{
                    // console.log('获取全部数据')
                    // console.log(data)
                    this.showData=data.data.dataList
                    this.pageCount=data.data.totalPage
                    this.totalSize=data.data.totalSize
                })
            },

            //查询

        },
        created() {
            this.getCulData()

        }

    }
</script>

<style lang="less">
    .Sys-content-box{
        .el-pagination{
            position: absolute;

            margin: -40px 20px 40px;
        }
        .sys-content-head{

            margin: 0;
            >button{
                float: left;
            }
            >div.serach-input{
                float: right;
                .el-input{
                    width: 30%;
                    margin: 0 20px;
                }
            }

        }

        .el-tag {

            cursor: pointer;
            background-color: rgba(255, 225, 205, 0.23);
            margin:5px 10px;
            transition: all .2s;
            &:hover{
                background-color: #ff9d2b;
                color: white;
                transform: scale(1.1);
            }
        }
        .del-tag{
            padding: 0 10px;
        }
        .button-new-tag {
            margin-left: 10px;
            height: 32px;
            line-height: 30px;
            padding-top: 0;
            padding-bottom: 0;
        }
        .input-new-tag {
            width: 90px;
            margin-left: 10px;
            vertical-align: bottom;
        }
        .color-item{
            color: chocolate;
        }
        .el-table{
            padding-bottom: 100px;

        }
    }


</style>